// 指令仅仅适用于 img 标签
// img 元素首先加载 src 里面的资源 如果没能加载完成 利用 new Image 创造出的图片做代理完成加载
// 首次加载 el.complete 为false 会进行预加载 除非浏览器刷新页面 否则再次进入页面图片会找浏览器的缓存 此时el.complete 为true 不在预加载
import Vue from 'vue'
import preimage from "../icons/preimage.svg"
let scroll = {};
scroll.config = {};
scroll.install = (Vue) => {
  Vue.directive('preload', {
    bind(el, binding) {
      if (el.nodeName !== "IMG") {
        console.error("use v-preload in img tag")
        return
      }
      // binding.value 是图片的真实地址
      if (!binding.value) {
        return
      }
      //  如果图片加载完成了不需要预加载
      if (el.complete) {
        return
      }
      el.setAttribute("src", preimage);
      const relSrc = binding.value
      const pre = new Image();
      pre.setAttribute("src", relSrc);
      pre.onload = function () {
        el.setAttribute("src", relSrc);
      }
    }
  })
}
Vue.use(scroll)
